<!--
 * @Author: sjt
 * @Date: 2022-10-25 13:18:12
 * @LastEditors: sjt
 * @LastEditTime: 2024-09-29 10:30:31
 * @Description: file content
-->
<template>
  <div class="cirChart" ref="cirChartRef"></div>
</template>

<script setup>
import { defineExpose, ref } from 'vue'
import * as echarts from 'echarts'
import mapData from '@/assets/map.json'
let charts = null
const cirChartRef = ref(null)
const initChart = (datas) => {
  echarts.registerMap('china', mapData);
  let allData = {
    citys: datas.PointData.map(item => {
      return {
        name: item.name,
        value: [item.longitude, item.latitude]
      }
    }),
  }

  let option = {
    tooltip: {
      trigger: "item",
      formatter: function (params, ticket, callback) {
        if (params.seriesType == "effectScatter") {
          return params.marker + params.data.name + "" + params.data.value[2];
        } else if (params.seriesType == "lines") {
          return params.data.fromName + " -> " + params.data.toName + "<br />" + params.data.value;
        } else {
          return params.name;
        }
      },
    },
    grid: {
    },
    geo: {
      layoutCenter: ["50%", "50%"],
      map: 'china',
      aspectScale: 1, //长宽比
      zoom: 1.12,
      tooltip: {
        show: !1,
      },
      scaleLimit: {
        min: 1,
        max: 5,
      },
      label: {
        show: !1,
      },
      roam: false,
      itemStyle: {
        normal: {
          shadowColor: "#164A7C",
          shadowOffsetX: 5,
          shadowOffsetY: 5,
        },
      },
    },
    tooltip: {
      trigger: "item",
    },
    series: [
      {
        type: "map",
        layoutCenter: ["50%", "50%"],
        roam: false,
        label: {
          show: !1,
        },
        tooltip: {
          show: !1,
        },
        itemStyle: {
          borderColor: "#3EC3E3",
          borderWidth: 0.2,
          areaColor: {
            type: "radial",
            x: 0.5,
            y: 0.5,
            r: 0.8,
            colorStops: [
              {
                offset: 0,
                color: "#1867B5", // 0% 处的颜色
              },
              {
                offset: 1,
                color: "#1867B5", // 100% 处的颜色
              },
            ],
            globalCoord: true, // 缺省为 false
          },
          emphasis: {
            label: {
              // show: !1,
              color: "#fff",
            },
            areaColor: "#0E83B7",
            //    shadowColor: 'rgb(12,25,50)',
            borderWidth: 0.2,
          },
        },
        aspectScale: 1, //长宽比
        zoom: 1.12,
        //     roam: false,
        map: "china", //使用
      },
      {
        type: "effectScatter",
        coordinateSystem: "geo",
        zlevel: 2,
        rippleEffect: {
          //涟漪特效
          period: 15, //动画时间，值越小速度越快
          brushType: "stroke", //波纹绘制方式 stroke, fill
          scale: 2, //波纹圆环最大限制，值越大波纹越大
        },
        label: {
          normal: {
            show: false,
            position: "right", //显示位置
            offset: [5, 0], //偏移设置
            formatter: "{b}", //圆环显示文字
            textStyle: {
              color: "rgb(214,206,143)",
            },
          },
        },
        emphasis: {
          show: true,
          scale: !0,
          label: {
            show: true,
            backgroundColor: "#000",
            padding: 2,
            borderRadius: 2,
            color: "#fff",
          },
        },
        symbol: "circle",
        symbolSize: "4",

        itemStyle: {
          normal: {
            show: false,
            color: "rgb(216, 167, 33)",
          },
        },
        data: allData.citys,
      },

    ],
  }







  if (!charts) {
    charts = echarts.init(cirChartRef.value)
    charts.setOption(option)
  } else {
    charts.dispose()
    charts = echarts.init(cirChartRef.value)
    charts.setOption(option)
  }
  window.addEventListener('resize', () => {
    if (charts) {
      charts.resize()
    }
  })
}

defineExpose({
  initChart
})
</script>

<style lang="scss" scoped>
.cirChart {
  width: 100%;
  height: 100%;
  overflow: hidden;
  background-position: 5% center;
}
</style>
